<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formInfo" class="formBox">
        <el-form-item label="查询参数">
          <el-input v-model="formInfo.query" placeholder="请输入查询内容" />
        </el-form-item>
        <el-form-item label="查询方式">
          <el-select v-model="formInfo.param" placeholder="请选择查询方式">
            <el-option label="电话号码" value="number" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryResident">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="tableBox">
      <template #header>
        <div class="card-header">
          <span>角色列表</span>
          <div>
            <el-button class="button" type="success" @click="loadingInfo">
              重置信息
            </el-button>
          </div>
        </div>
      </template>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="id" label="用户编号" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="detailAddress" label="详细地址" />
        <el-table-column label="性别">
          <template #default="props">
            <el-tag class="ml-2" :type="tagMap[props.row.sex].type">{{
              tagMap[props.row.sex].info
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话号" />
      </el-table>
      <div class="paginationBox">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useResidentStoreHook } from "@/store/modules/resident";
import { message } from "@/utils/message";

// 查询信息
const formInfo = reactive({
  query: "",
  param: "number"
});

// 分页信息
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);

// 获取列表信息
let loading = true;
const total = ref(100);
const tableData = ref([]);
const residentStore = useResidentStoreHook();
async function loadingInfo() {
  await residentStore.getResidentInfo(currentPage.value, pageSize.value);
  loading = false;
  total.value = residentStore.total;
  tableData.value = residentStore.residentList;
}
loadingInfo();

// 分页改变对应操作
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  loadingInfo();
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  loadingInfo();
};

// 获取性别对应状态Tag
const tagMap = {
  null: {
    info: "未填写",
    type: "info"
  },
  0: {
    info: "男",
    type: "success"
  },
  1: {
    info: "女",
    type: ""
  }
};

async function queryResident() {
  if (formInfo.query == null || formInfo.query == "") {
    message("请输入查询参数", { type: "error" });
    return;
  }
  await residentStore.queryResidentByPhone(
    Number(formInfo.query),
    currentPage.value,
    pageSize.value
  );
  total.value = residentStore.total;
  tableData.value = residentStore.residentList;
}
</script>

<style scoped>
.formBox {
  padding-top: 1rem;
  padding-left: 2rem;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tableBox {
  margin-top: 20px;
}

.paginationBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
</style>
